<template>
  <div class="step1">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="150px"
      class="step1-ruleForm"
    >
      <el-form-item label="客户" prop="customerName">
        <!-- {{ ruleForm.customerName }} -->
        <el-select
          v-model="ruleForm.customerId"
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option
            v-for="item in options"
            :key="item.customerId"
            :label="item.customerName"
            :value="item.customerId"
          >
          </el-option>
        </el-select>
        <el-button
          @click="onchose('addcustomer')"
          style="margin-left: 10px"
          type="primary"
          size="mini"
        >
          新增</el-button
        >
        <!-- <el-button @click="onchose('customerModalVue')" size="mini">
          选择</el-button
        > -->
      </el-form-item>
      <el-form-item label="冲突检索关键词" prop="key">
        <el-input
          v-model.trim="key"
          width="800px"
          style="width: 600px"
          placeholder="多个关键词请用逗号隔开"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="nav">
      <el-button type="primary" @click="oncheck('ruleForm')"
        >冲突检索</el-button
      >
      <el-button
        @click="onsubmit('ruleForm')"
        v-if="ruleForm.customerId && isclick"
        >下一步</el-button
      >
    </div>
    <div class="main" v-if="isshow">
      <div class="title">客户检索结果</div>
      <div class="table-title">关键词：{{ showkey }}</div>
      <el-table
        :data="customers"
        style="width: 100%"
        border
        v-if="lawCases.length > 0"
      >
        <el-table-column prop="customerNo" label="客户编号"> </el-table-column>
        <el-table-column prop="customerName" label="客户名称">
          <template slot-scope="scope">
            <div class="htmlcss" v-html="scope.row.customerName" />
          </template>
        </el-table-column>
        <el-table-column prop="address" label="客户分类">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type[scope.row.categoryId]"
              :value="scope.row.subCategoryId"
            />
          </template>
        </el-table-column>
        <el-table-column prop="state" label="客户状态">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.customer_state"
              :value="scope.row.state"
            />
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="联系电话"> </el-table-column>
        <el-table-column prop="createBy" label="登记人"> </el-table-column>
      </el-table>
      <div v-else class="nodata">未检测到相关信息</div>
      <div class="title">案件检索结果</div>
      <div class="table-title">关键词：{{ showkey }}</div>
      <el-table
        :data="lawCases"
        style="width: 100%"
        border
        v-if="lawCases.length > 0"
      >
        <el-table-column prop="caseNo" label="案件编号">
          <template slot-scope="scope">
            <div class="htmlcss" v-html="scope.row.caseNo" />
          </template>
        </el-table-column>
        <el-table-column prop="caseName" label="案件名称">
          <template slot-scope="scope">
            <div class="htmlcss" v-html="scope.row.caseName" />
          </template>
        </el-table-column>
        <el-table-column prop="customerName" label="客户" width="80">
          <template slot-scope="scope">
            <div v-html="scope.row.customerName"></div>
          </template>
        </el-table-column>
        <el-table-column prop="receiptlate" label="收案时间" width="100">
          <template slot-scope="scope">
            <div class="htmlcss" v-html="scope.row.receiptlate" />
          </template>
        </el-table-column>
        <el-table-column prop="subCategoryName" label="案件类型" width="80">
          <template slot-scope="scope">
            <div class="htmlcss" v-html="scope.row.subCategoryName" />
          </template>
        </el-table-column>
        <el-table-column prop="status" label="案件状态" width="80">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.case_state"
              :value="scope.row.status"
            />
          </template>
        </el-table-column>
        <el-table-column prop="sourcePerson" label="案件负责人" width="80">
          <template slot-scope="scope">
            <div class="htmlcss" v-html="scope.row.sourcePerson" />
          </template>
        </el-table-column>
        <el-table-column prop="handlerName" label="承办人员" width="80">
        </el-table-column>
        <el-table-column
          prop="otherConflicts"
          label="其他可能冲突内容"
          width="150"
        >
          <template slot-scope="scope">
            <div
              v-for="(item, index) of scope.row.otherConflicts"
              :key="index + 'oth'"
            >
              <div class="htmlcss" v-html="item.content" />
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div v-else class="nodata">未检测到相关信息</div>
    </div>
    <customerModalVue ref="customerModalVue" @submit="submitCusmoer" />
    <addcustomer ref="addcustomer" @submit="submitCusmoer" />
  </div>
</template>

<script>
import variables from "@/assets/styles/variables.scss";
import customerModalVue from "./customerModal.vue";
import { casecheck, customerlist } from "@/api/case/case";
import addcustomer from "../customer/addcustomer.vue";
export default {
  name: "addstep1",
  dicts: ["customer_state", "case_state", "unit", "person"],
  components: { customerModalVue, addcustomer },
  data() {
    return {
      ruleForm: {
        customerId: "",
      },
      key: "",
      isclick: false,
      showkey: "", //关键词展示
      isshow: false,
      customers: [],
      lawCases: [],
      rules: {
        customer: [
          { required: true, message: "请选择客户", trigger: "change" },
        ],
        // age: [{ validator: checkAge, trigger: "blur" }],
      },
      isCheck: {
        customerId: "",
        key: "",
      },
      loading: false,
      options: [],
    };
  },

  computed: {
    customerName() {
      console.log("this.ruleForm.customerId", this.ruleForm.customerId);
      let name = this.options.filter(
        (item) => item.customerId == this.ruleForm.customerId
      );
      if (name.length > 0) {
        return name[0].customerName;
      } else {
        return "";
      }
    },
  },
  methods: {
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        customerlist({
          pageNum: 1,
          pageSize: 20,
          customerName: query,
        }).then((res) => {
          console.log("res.rows");
          console.log(res.rows);
          this.loading = false;
          this.options = res.rows;
        });
      } else {
        this.options = [];
      }
    },
    //客户弹选择
    onchose(refname) {
      this.$refs[refname].open({});
    },
    oncheck(formName) {
      if (this.key || this.customerName) {
        casecheck({
          highlightColor: "red",
          keywords: this.key,
          customerName: this.customerName,
        }).then((res) => {
          this.customers = res.data.customers || [];
          this.lawCases = res.data.lawCases || [];
          this.showkey = this.key;
          this.isCheck = {
            customerId: this.ruleForm.customerId,
            key: this.key,
          };
        });
        this.isshow = true;
        this.isclick = true;
      } else {
        this.$alert("请先选择客户！", "提示");
      }
    },
    submitCusmoer(val) {
      console.log("submitCusmoer", val);
      // this.ruleForm.customerName = val.customerName;
      this.ruleForm.customerId = val.customerId;
      this.remoteMethod(val.customerName);

      // this.customerName = val.customerName;
    },
    onsubmit(formName) {
      if (
        !(
          this.isCheck.customerId == this.ruleForm.customerId &&
          this.isCheck.key == this.key
        )
      ) {
        return this.$message.warning("信息发生变更，请重新检索冲突");
      }

      this.$emit("next", {
        customerName: this.customerName,
        customerId: this.ruleForm.customerId,
      });
      // this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.step1 {
  padding: 20px;
  text-align: center;
  .step1-ruleForm {
    text-align: left;
    display: inline-block;
    margin: auto;
  }
  .nav {
    margin-top: 30px;
  }
  .main {
    margin-top: 20px;
    .title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 10px;
      margin-top: 10px;
    }
    .table-title {
      background: $--color-titlebg;
      font-size: 14px;
      font-weight: 600;
      padding: 10px 20px;
      text-align: left;
      border: 1px solid $--color-border;
    }
    .nodata {
      color: $-color--gary-text;
      background: $--color-table-td;
      border: 1px solid $--color-border;
      padding: 20px;
    }
  }
}
.htmlcss >>> .span {
  color: red;
}
::v-deep.highlight {
  color: red;
}
span.highlight {
  color: red;
}
.red {
  color: red;
}
::v-deep th.is-leaf.el-table__cell {
  // background: $--color-titlebg;
  // border: 1px solid $--color-border;
  // border-top: 0px;
}
::v-deep td.el-table__cell {
  // background: $--color-table-td;
  // border: 1px solid $--color-border;
  // border-top: 0px;
}
</style>
<style>
.highlight {
  color: red;
}
</style>
